---
title: Thread
---

import { Steps, Step } from "fumadocs-ui/components/steps";
import { Callout } from "fumadocs-ui/components/callout";

## Overview

The raw message list and message composer UI.

## Getting Started

<Steps>
  <Step>

### Add `thread`

```sh
npx shadcn@latest add "https://r.assistant-ui.com/thread"
```

This adds a `/components/assistant-ui/thread.tsx` file to your project, which you can adjust as needed.

  </Step>
  <Step>

### Use in your application

```tsx title="/app/page.tsx" {1,6}
import { Thread } from "@/components/assistant-ui/thread";

export default function Home() {
  return (
    <div className="h-full">
      <Thread />
    </div>
  );
}
```

  </Step>
</Steps>
